<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<script src="js/login.js"></script>
		<link href="css/loginandregister.css" rel="stylesheet" type="text/css" />
		<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
			rel="stylesheet">
		<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>

	<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p style="color: white;">USER LOGIN IN </p>
				<p style="color: white;">用户登录</p>
			</div>
			<div class="rg_center">
				<div class="rg_form" style="position: relative; top: 150pt;left: 75pt;">
					<form action="#" id="form1" onsubmit="return true">
						<table>
							<tr>
								<td class="td_left"><label for="username1"><i style="color: azure;">用户名</i></label></td>
								<td class="td_right">
									<!-- onblur监听用户输入的值 -->
									<input type="text" name="username1" id="username1" required
										placeholder="请输入用户名(6到10位大小写数字)" onblur="checkUsername(this.value)">
									<span id="s_username" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="password1"><i style="color: azure;">密码</i></label></td>
								<td class="td_right">
									<span class="box">
										<input type="password" required name="password1" id="password1"
											placeholder="请输入密码(6到10位大小写数字)">
										<label for="password1">
											<img src="img/close.png" alt="" id="eye1">
										</label>
									</span>
									<span id="s_password" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="checkcode"><i style="color: azure;">验证码</i></label></td>
								<td class="td_right"><input type="text" required name="checkcode" id="checkcode"
										placeholder="请输入验证码">
									<img id="img_check" src="img/code.png">
									<span class="error" id="code_input">
								</td>
							</tr>

							<tr>
								<td colspan="2" id="td_sub">
									<input type="submit" id="btn_sub" value="登录" onclick="checkform();">
									<input type="reset" id="btn_subs" value="重 置">
								</td>
							</tr>

						</table>
					</form>

				</div>
			</div>
		</div>
		<script>
			//获取ID内容
			var eye1 = document.getElementById('eye1');
			var password = document.getElementById('password1');
			var flag1 = 0;
			//触发点击事件 处理程序
			eye1.onclick = function() {
				//点击一次后 flag一定要变化
				if (flag1 == 0) {
					password.type = 'text';
					eye1.src = 'img/open.png';
					flag1 = 1;
				} else {
					password.type = 'password';
					eye1.src = 'img/close.png';
					flag1 = 0;
				}
			}


			$("#btn_sub").click(function() {

				if (checkform() == true) {
					//登录的验证表单信心
					var username = $("#username1").val();
					var pass = $("#password1").val();

					$.ajax({
						url: "http://127.0.0.1:8080/submit",
						data: {
							name: username,
							password: pass
						},
						type: "GET",
						dataType: "json",
						success: function(result) {
							if (result) {

								localStorage.UserName = username;
								localStorage.PassWord = pass;
								window.alert("登录成功 信息已经存入local");
								//跳转
								location.replace('主页.html')
							}

						},
						error: function(err) {
							console.log(err);
						},

					});
				}

			});

			function checkform() {
				//表单总确认
				if (checkUsername() && checkPassword() && imgCode() == true) {

					// user——id 数据添加在session里面即可
					return true;
				} else {
					alert("密码和验证码信息有误！");
					return false;
				}
			}

			//检查user名字是否存在
			$("#username1").blur(
				function() {
					var xhr = new XMLHttpRequest();
					//2，设置状态监听
					xhr.onreadystatechange = function() {
						if (xhr.readyState === 4) {
							if (xhr.status >= 200 & xhr.status < 300) {
								var result = xhr.response;
								console.log(result);
								if (result) {
									alert("名字存在，请继续");
								} else {
									alert("名字不存在请注册或更换账号！");
									document.getElementById("username1").value = null;
									document.getElementById("username1").focus();
									console.log(3);
								}

							}

						}
					}
					//3，建立与服务端的连接Get(get请求传参，要将参数拼接到URl中)
					let name = document.getElementById("username1").value; //获取表单中name对应的value属性值
					console.log(4);
					xhr.open("GET", "http://localhost:8080/doCheck?name=" + name, true);
					//4，发送请求
					xhr.send();
				}
			)

			$("#password1").blur(function() {

				var uname = $("#username1").val();
				$.ajax({
					url: "http://127.0.0.1:8080/getUserId",
					data: {
						name: uname,
					},
					type: "GET",
					dataType: "json",
					success: function(result) {

						localStorage.Userid = result;

						console.log(result);
					},
					error: function(err) {
						console.log(err);
					},

				});
			});
		</script>
	</body>
</html>
